<template>
    <div class="padding16">
        <SearchC @cancelEvent='onCancel' :autofocus='true' :showAction='true' shape="round" @event='searchVal' placeholder="请输入遇到问题的关键词"/>
        <QuestionsC :searchValue='searchValue' :questions='questions' :title='title'/>
        <div class="questionBar" v-show="questionBarShow">
            <div class="font_sub_title">以上均没有您想问的问题？</div>
            <div class="font_href_title margin-top12" @click="submit">立即提交问题</div>
        </div>
    </div>
</template>
<script>
import { SearchC } from '@/components'
import QuestionsC from './questions.vue'
export default ({
    components: {
        SearchC,
        QuestionsC
    },
    data(){
        return {
            questions: [],
            title: '',
            questionBarShow: false,
            searchValue: ''
        }
    },
    methods: {
        searchVal(val) {
            this.searchValue = val
            this.$store.dispatch('queryQuestionList',{keyword: val}).then( res=> {
                if(res.length >0){
                    this.questions = res
                    this.title = '已有答案'
                    this.questionBarShow = true
                }else{
                    this.questionBarShow = false
                    // 通过JSON.parse()获取JSON.stringify()转化的对象数组
                    this.questions = JSON.parse(this.$route.params.questions)
                    this.title = '常见问题'
                }
            })
        },
        onCancel(){
            this.$router.push({name: 'CallBack'})
        },
        submit(){
            this.$router.push({name: 'SubmitCbC'})
        }
    }
})
</script>

<style lang="less" scoped>
@import '@/assets/style/style.less';
@import '@/assets/style/color.less';
@import '@/assets/style/font.less';
.questionBar{
    padding: 20px;
    border-radius: 15px;
    background: @color_border_f5;
}
</style>